<template>
	<view class="content">
		<div class="swiperDiv">
			<image src="../../static/common/img12.png" mode="" class="topImg"></image>
		</div>
		<div class="bot-msg">
			<div class="bot-msg-bock">
				<div>
					<span class="bock1">程小波</span>
					<span class="bock2">主治医师</span>
				</div>
				<div class="bock3">
					心脑血管网络门诊
				</div>
				<div class="bock4">
					<span :class="isActive?'span1 active':'span1'" @click="clickBock4">挂号</span>
					<span :class="!isActive?'span2 active':'span2'" @click="clickBock4">简介</span>
					<span :class="isActive?'icon':'icon2'"></span>
				</div>
				<div class="bock5" v-if="isActive">
					<div class="bock5-div">
						<span class="span1">{{date}}</span>
						<span class="span2">

							<picker mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindDateChange">
								更多
								<image src="../../static/common/img3.png" mode="" class="img"></image>

							</picker>
						</span>
					</div>
				</div>
				<div class="bock6" v-if="isActive">
					<div :class="item.isActive?'bock6-div active2':'bock6-div'" v-for="(item,index) in data"
						:key="index" @click="clickBock6(index)">
						<uni-row>
							<uni-col :span="2">
								<image src="../../static/common/img11.png" mode="" class="img1">
								</image>
							</uni-col>
							<uni-col :span="15">
								<div class="time">
									{{item.time}}
								</div>
							</uni-col>
							<uni-col :span="7">
								<div class="num">{{item.num}}
									<image src="../../static/common/img2.png" mode="" class="img2"></image>
									<!-- <image src="../../static/common/img22.png" mode="" class="img2"></image> -->
								</div>
							</uni-col>
						</uni-row>
					</div>
					<div class="bock7">
						<button type="primary" @click="submit">确 定</button>
					</div>
				</div>
				<div class="bock8" v-if="!isActive">
					<div class="title">
						<image src="../../static/common/img11.png" mode="" class="img"></image>
						个人简介
					</div>
					<div class="msg">
						内容内容内容内容内容内容内容内容内容内容内容内容内容
						内容内容内容内容内容内容内容内容内容内容内容内容内容
					</div>
					<div class="title">
						<image src="../../static/common/img11.png" mode="" class="img"></image>
						擅长方向
					</div>
					<div class="msg">
						擅长方向擅长方向擅长方向擅长方向擅长方向擅长方向
						擅长方向擅长方向擅长方向擅长方向擅长方向擅长方向
					</div>
				</div>

			</div>

		</div>
	</view>

</template>

<script>
	export default {

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				isActive: true,
				isActive2: false,
				date: currentDate,
				data: [{
						time: '上午 8:00-12:00',
						num: '￥ 81.00',
						isActive: false
					},
					{
						time: '上午 8:00-12:00',
						num: '￥ 81.00',
						isActive: false
					},
					{
						time: '上午 8:00-12:00',
						num: '￥ 81.00',
						isActive: false
					}
				],

			}
		},
		onShow() {

		},
		onLoad(options) {
			console.log(options, "options")
			// this.searchValue=options.value
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {

			clickBock4() {
				this.isActive = !this.isActive
			},
			clickBock6(val) {

				this.data.forEach((item, index) => {
					if (val == index) {
						item.isActive = true
					} else {
						item.isActive = false
					}
				})
			},
			submit(){
				this.$common.navigateTo("/pages/register/confirm")
			},
			queryList(pageNo, pageSize) {
				this.$refs.paging.complete(this.list);

			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.swiperDiv {
		height: 580rpx;
		background-color: #1648ce;
	}
	.topImg{
		width: 100%;
		height: 100%;
	}
	.bot-msg {
		position: absolute;
		top: 480rpx;
		width: 100%;
		height: calc(100% - 480rpx);

		background-color: #fff;
		border-top-right-radius: 70rpx;
	}

	.bot-msg-bock {
		padding: 36rpx;
	}

	.bot-msg .bock1 {
		color: #333333;
		font-size: 48rpx;
		font-weight: 600;
	}

	.bot-msg .bock2 {
		margin-left: 24rpx;
		color: #1648CE;
		font-size: 28rpx;
	}

	.bot-msg .bock3 {
		margin-top: 24rpx;
		color: #333333;
		font-size: 28rpx;
	}

	.bot-msg .bock4 {
		position: relative;
		margin-top: 36rpx;
		font-size: 28rpx;
		border-bottom: 2rpx solid #F2F4F5;
	}

	.bot-msg .bock4 .span1,
	.bot-msg .bock4 .span2 {
		width: 50%;
		height: 96rpx;
		line-height: 96rpx;
		display: inline-block;
		text-align: center;
	}

	.bot-msg .bock4 .icon {
		display: inline-block;
		position: absolute;
		left: 21%;
		bottom: 0;
		background-color: #1648CE;
		width: 54rpx;
		height: 4rpx;

	}

	.bot-msg .bock4 .icon2 {
		display: inline-block;
		position: absolute;
		right: 21%;
		bottom: 0;
		background-color: #1648CE;
		width: 54rpx;
		height: 4rpx;

	}

	.active {
		color: #1648CE;
		font-weight: 600;
		background-color: #F5FAFF;
	}


	.bot-msg .bock5 {
		margin: 30rpx 0;
		font-weight: 600;
		/* position: relative; */
		/* text-align: right; */
	}

	.bot-msg .bock5 .img {
		width: 48rpx;
		height: 48rpx;
		vertical-align: middle;
		margin-bottom: 4rpx;
	}

	.bot-msg .bock5 .bock5-div .span1 {
		/* position: absolute;
		left: 0; */
		text-align: left;
	}

	.bot-msg .bock5 .bock5-div .span2 {
		text-align: right;
		/* position: absolute;
		right: 0; */
	}

	.bot-msg .bock5 .bock5-div .span1,
	.bot-msg .bock5 .bock5-div .span2 {
		display: inline-block;
		width: 50%;
		color: #1648CE;
		font-size: 28rpx;
	}

	.bot-msg .bock6 {
		height: 76rpx;
		line-height: 76rpx;
		font-size: 28rpx;

		border-radius: 10px 10px 10px 10px;
	}

	.bot-msg .bock6 .bock6-div {
		margin-bottom: 12rpx;
		/* color: #CACACA;
		background: rgba(202, 202, 202, 0.1); */
		border: 2rpx solid #F5FAFF;
		background: #F5FAFF;
		color: #1648CE;
	}

	.active2 {
		border-radius: 10px;
		border: 2rpx solid #1648CE !important;
	}

	.bot-msg .bock6 .img1 {
		width: 24rpx;
		height: 24rpx;
		padding-left: 24rpx;
	}

	.bot-msg .bock6 .img2 {
		width: 40rpx;
		height: 40rpx;
		padding-left: 14rpx;
		vertical-align: middle;
		margin-bottom: 4rpx;
	}

	.bock7 {
		margin-top: 80rpx;
	}

	.bock8 {}

	.bock8 .title {
		color: #1648CE;
		font-size: 28rpx;
		font-weight: 600;
		margin-top: 36rpx;

	}

	.bock8 .img {
		width: 24rpx;
		height: 24rpx;
		margin-right: 12rpx;
	}

	.bock8 .msg {
		margin-top: 12rpx;
		margin-left: 48rpx;
		font-size: 28rpx;
		color: #333333;
	}

	button[type=primary] {
		background-color: #1648CE;
	}
</style>